<template>
  <el-container>
    <el-header>
      <i class="el-icon-user el-icon--right titSty" style="font-size: 1.2vw">
        正在修改学生信息</i
      >
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="6">
          <el-row>
            <input
              type="file"
              @change="tirggerFile($event)"
              :src="imgUrl"
              v-if="imgUrl"
            /> </el-row
          ><br />
          <el-row style="padding-bottom: 20px">
            <img style="" :src="imgUrlStar" />
          </el-row>

          <input
            type="text"
            v-model="editStudentData.name"
            placeholder="姓名"
            class="inputSty1"
            style="
              border-bottom: 1px solid grey;
              width: 37%;
              padding-left: 21%;
              background-color: #e9eef3;
            "
          />
        </el-col>

        <el-col :span="18">
          <el-row
            >学院:<input
              type="text"
              v-model="editStudentData.college"
              placeholder="学院"
              class="inputSty1"
              style="width: 80%" /></el-row
          ><br />
          <el-row
            >专业:<input
              type="text"
              v-model="editStudentData.major"
              placeholder="专业"
              class="inputSty1"
              style="width: 80%" /></el-row
          ><br />
          <el-row
            >身份证号:<span class="inputSty1">
              {{ editStudentData.idNumber }}
            </span> </el-row
          ><br />
          <el-row
            >籍贯:<input
              type="text"
              v-model="editStudentData.nativePlace"
              placeholder="籍贯"
              class="inputSty1"
              style="width: 80%" /></el-row
          ><br />
        </el-col> </el-row
      ><br />

      <el-row style="padding-top: 8px">
        <el-col :span="12"
          >性别:<input
            type="text"
            v-model="editStudentData.sex"
            placeholder="性别"
            class="inputSty1"
            style="width: 20%"
        /></el-col>
        <el-col :span="12"
          >政治面貌:<input
            type="text"
            v-model="editStudentData.politicalOutlook"
            placeholder="政治面貌"
            class="inputSty1"
        /></el-col> </el-row
      ><br />

      <el-row>
        <el-col :span="12">
          学号:<span class="inputSty1">
            {{ editStudentData.id }}
          </span>
        </el-col>
        <el-col :span="12"
          >年级:<input
            type="text"
            v-model="editStudentData.grade"
            placeholder="年级"
            class="inputSty1"
            style="width: 70%"
        /></el-col> </el-row
      ><br />
      <hr style="width: 93%; margin-left: 0px" />
      <el-row>
        <el-col :span="3">
          <el-button size="mini" @click="editData(editStudentData)"
            >确定修改</el-button
          >
        </el-col>

        <el-col :span="3">
          <el-button size="mini" onclick="window.history.go(-1)"
            >取消</el-button
          >
        </el-col>

        <el-col :span="5" style="float: right">别忘记检查哦!!</el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
let inputElement = null;
import adminMixin from "../../mixin/adminMixin";
export default {
  name: "editStudent",
  mixins: [adminMixin],
  data() {
    return {
      imgUrlStar:
        "http://120.79.136.233:9898/admin/queryStudentUserHeadPortraitById/" +
        this.$route.params.id,
      imgUrl: new FormData(),
      studentId: "",
      editStudentData: {},
    };
  },

  mounted() {
    this.studentId = this.$route.params.id;
    this.getStudentReq("/admin/queryStudentUserById/", this.studentId);
  },

  methods: {
    getStudentReq(url, id) {
      this.$axios({
        method: "get",
        url: url + id,
        headers: { "Content-Type": "application/json" },
      })
        .then((res) => {
          this.editStudentData = res.data.data[id];
        })
        .catch((e) => {
          console.log(e);
        });
    },

    tirggerFile(event) {
      let file = event.target.files[0];
      this.imgUrl.append("file", file);
      console.log(event);
    },

    editData(updateStudent) {
      this.$axios({
        method: "post",
        url: "/admin/updateStudentUser",
        data: JSON.stringify(updateStudent),
        headers: { "Content-Type": "application/json" },
      })
        .then((res) => {
          this.Students = res;
        })
        .catch((e) => {
          console.log(e);
        });

      // 向服务器发送修改图片请求
      this.$axios({
        method: "post",
        url: "/admin/saveStudentHeadPortrait",
        data: this.imgUrl,
        params: { id: this.studentId },
        headers: { "Content-Type": "multipart/form-data" },
      })
        .then((res) => {
          alert("修改成功");
          (this.imgUrlStar =
            "http://120.79.136.233:9898/admin/queryStudentUserHeadPortraitById/" +
            this.$route.params.id),
            (this.imgUrl = res.data);
        })
        .catch((e) => {
          console.log(e);
        });

      this.$router.push({ name: "adminStudents" });
    },

    toGetImg() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement("input");
        inputElement.setAttribute("type", "file");
        inputElement.style.display = "none";

        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile, false);
        } else {
          inputElement.attachEvent("onchange", this.uploadFile);
        }

        document.body.appendChild(inputElement);
      }
      inputElement.click();
    },
    uploadFile(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        console.log(el);
        const files = el.target.files[0];
        const isLt2M = files.size / 1024 / 1024 < 2;
        const size = files.size / 1024 / 1024;
        console.log(size);
        // 判断上传文件的大小
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        } else if (files.type.indexOf("image") === -1) {
          //如果不是图片格式
          this.$dialog.toast({ mes: "请选择图片文件" });
          this.$message.error("请选择图片文件");
        } else {
          const that = this;
          const reader = new FileReader(); // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
          reader.onload = function () {
            // 文件读取完成后
            // 读取完成后，将结果赋值给img的src
            that.imgUrl = this.result;
            console.log(this.result);
            // 数据传到后台
            // const formData = new FormData()
            // formData.append('file', files); // 可以传到后台的数据
          };
        }
      }
    },

    beforeDestroy() {
      if (inputElement) {
        if (window.addEventListener) {
          inputElement.removeEventListener(
            "change",
            this.onGetLocalFile,
            false
          );
        } else {
          inputElement.detachEvent("onchange", this.onGetLocalFile);
        }
        document.body.removeChild(inputElement);
        inputElement = null;
        console.log("========inputelement destroy");
      }
    },
  },
};
</script>

<style scoped>
.el-header {
  height: 3vh !important;
  line-height: 3vh;
  text-align: center;
  width: 100%;
  background-color: #b3c0d1;
  margin-bottom: 10px !important;
}

.el-main {
  width: 70% !important;
  margin-left: 15% !important;
  text-align: left !important;
  background-color: #e9eef3;
  padding-left: 5% !important;
  padding-top: 2%;
  font-size: 1.1vw;
  box-shadow: 1px 3px 0 2px rgba(178, 192, 211, 0.6);
}

.inputSty1 {
  width: 63%;
  margin: 5px;
  border: none;
  outline: none;
  font-size: 1vw;
}

img {
  width: 60%;
  height: 160px;
  border-radius: 2px;
  box-shadow: 1px 3px 0 2px rgba(178, 192, 211, 0.6);
}
</style>